<%@page import="guestbook.dao.SaludoDAOImplementation"%>
<%@page import="guestbook.dao.SaludoDAO"%>
<%@page import="javax.persistence.Query"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="guestbook.persistencia.Saludo"%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ page import="java.util.List"%>
<%@ page import="com.google.appengine.api.users.User"%>
<%@ page import="com.google.appengine.api.users.UserService"%>
<%@ page import="com.google.appengine.api.users.UserServiceFactory"%>
<%@ page import="guestbook.persistencia.Saludo"%>


<html>
<head>
<title>Star Rating widget Demo5 Page</title>

<!-- demo page css -->
<link rel="stylesheet" type="text/css" media="screen"
	href="jQuery/css/demos.css" />

<style type="text/css">
#messages {
	margin-left: 1em;
	float: left;
	line-height: 15px;
	color: #fd1c24
}
</style>

<!-- demo page js -->
<script type="text/javascript" src="jQuery/js/jquery.min.js"></script>
<script type="text/javascript" src="jQuery/js/jquery-ui.custom.min.js"></script>

<!-- Star Rating widget stuff here... -->
<script type="text/javascript"
	src="jQuery/js/jquery.ui.stars.js?v=3.0.1b44"></script>
 <link rel="stylesheet" type="text/css"
	href="jQuery/css/crystal-stars.css" /> 

<script type="text/javascript">
	$(document).ready(function(){
		$.get("/votar?voto=no", {			
			idMensaje: "<%=request.getParameter("idMensaje")%>"
		}, function(db) {
			// Select stars from "Average rating" control to match the returned average rating value
			$("#avg").stars("select", Math.round(db.avg));

			// Update other text controls...
			$("#all_votes").text(db.votes);
			$("#all_avg").text(db.avg);


			
		}, "json");
	 });

	$(function() {
		$("#avg").children().not(":input").hide();
		$("#rat").children().not("select, #messages").hide();

		// Create stars for: Average rating
		$("#avg").stars(
		);

		// Create stars for: Rate this
		$("#rat").stars(
				{					
					inputType : "select",
					cancelShow : false,
					captionEl : $("#caption"),
					callback : function(ui, type, value) {
						// Disable Stars while AJAX connection is active
						ui.disable();

						// Display message to the user at the begining of request
						$("#messages").text("Saving...").stop().css("opacity",
								1).fadeIn(30);

						// Send request to the server using POST method
						/* NOTE: 
							The same PHP script is used for the FORM submission when Javascript is not available.
							The only difference in script execution is the returned value. 
							For AJAX call we expect an JSON object to be returned. 
							The JSON object contains additional data we can use to update other elements on the page.
							To distinguish the AJAX request in PHP script, check if the $_SERVER['HTTP_X_REQUESTED_WITH'] header variable is set.
							(see: demo5.php)
						 */
						$.get("/votar?voto=si", {
							rate : value,							
							idMensaje: "<%=request.getParameter("idMensaje")%>"							
						}, function(db) {
							// Select stars from "Average rating" control to match the returned average rating value
							$("#avg").stars("select", Math.round(db.avg));

							// Update other text controls...
							$("#all_votes").text(db.votes);
							$("#all_avg").text(db.avg);

							// Display confirmation message to the user
							$("#messages").text(
									"Rating saved (" + value + "). Thanks!")
									.stop().css("opacity", 1).fadeIn(30);

							// Hide confirmation message and enable stars for "Rate this" control, after 2 sec...
							setTimeout(function() {
								$("#messages").fadeOut(1000, function() {
									ui.enable()
								})
							}, 2000);
						}, "json");
					}
				});

		// Since the <option value="3"> was selected by default, we must remove selection from Stars.
		$("#rat").stars("selectID", -1);

		// Create element to use for confirmation messages
		$('<div id="messages"/>').appendTo("#rat");
	});
</script>


</head>


<body>

	<%
			SaludoDAO saludoDAO = new SaludoDAOImplementation();
			Saludo g = null;
			String strIdMensaje = request.getParameter("idMensaje");
			if (strIdMensaje == null || strIdMensaje.equals("")) {
		out.println("No se ha seleccionado un mensaje");
			} else {
		try {
			Long idMensaje = Long.parseLong(strIdMensaje);			
			g = saludoDAO.findByPK(Saludo.class, idMensaje);

		} catch (Exception e) {
			out.println("Problema al recuperar el mensaje: " + e);
		}

			}
	%>

	<%
		if (g == null) {
	%>
	<br> No existe el saludo
	<%
		} else {

			if (g.getAuthor() == null) {
	%>
	<p>An anonymous person wrote:</p>
	<%
		} else {
	%>
	<p>
		<b><%=g.getAuthor().getNickname()%></b> wrote:
	</p>
	<%
		}
	%>
	<code><%=g.getContent()%></code>
	<br>
	<code><%=new SimpleDateFormat("dd/MM/yy hh:mm:ss").format(g
						.getDate())%></code>





	<div class="ratings">

		<div class="rating-L">
			<strong>Average rating</strong> <span>(<span id="all_votes"></span>
				votes; <span id="all_avg"></span>)
			</span>
			<form id="avg" style="width: 200px">

				<input type="radio" name="rate_avg" value="1" title="Not so great"
					disabled="disabled" /> <input type="radio" name="rate_avg"
					value="2" title="Quite good" disabled="disabled" /> <input
					type="radio" name="rate_avg" value="3" title="Good"
					disabled="disabled" checked="checked" /> <input type="radio"
					name="rate_avg" value="4" title="Great!" disabled="disabled" /> <input
					type="radio" name="rate_avg" value="5" title="Excellent!"
					disabled="disabled" />

			</form>
		</div>


		<div class="rating-R">
			<strong>Rate this:</strong> <span id="caption"></span>
			<form id="rat" action="" method="get">		
				<select name="rate">
					<option value="1">Not so great</option>
					<option value="2">Quite good</option>
					<option value="3">Good</option>
					<option value="4">Great!</option>
					<option value="5">Excellent!</option>

				</select> <input type="submit" value="Rate it!" />

			</form>
		</div>

	</div>


	<%
		}
		saludoDAO.cerrar();	
		
	%>
	<center>
	<a href="guestbook_ver_mensajes.jsp?pagina="<%=request.getParameter("numPagina")%>">Volver</a>
	</center>


</body>
</html>